import React, {Component} from 'react'
import Swiper from 'react-native-swiper'
import {View, Text, Dimensions, StyleSheet} from 'react-native'
import TouchableText from './TouchableText'
import {connect} from 'react-redux'

const {width, height} = Dimensions.get('window')

const styles = StyleSheet.create({
    contaner: {
        width: width * 0.65
    },
    view: {
        flex: 1,
        width: width * 0.8,
        // backgroundColor: 'green',
        justifyContent: 'center',
        alignItems: 'flex-start',
        height: 16
    },
    text: {
        lineHeight: 16,
        // fontSize: 16,
        height: 16,
        color: 'black',
        textAlign: 'center'
    }

})

class TextSwiper extends Component {
    state = {
        nodata: '暂无公告'
    }
    render() {
        const {announcementList} = this.props
        let announcementListItems = [];
        for (let key in announcementList) {
            if (key !== 'length'&&announcementListItems.length < 5) {
                announcementListItems.push(announcementList[key])
            }
        }
        if (announcementList === null || announcementList.length === 0) {
            return <View style={styles.view}>
                <Text style={styles.text}>{this.state.nodata}</Text>
            </View>
        }
        return (
            <Swiper
                removeClippedSubviews={false}
                showsPagination={false}
                horizontal={false}
                autoplay={true}
                height={20}
                autoplayTimeout={3}
                style={styles.contaner}>
                {announcementListItems.map((item) => {
                    return <TouchableText announcement={item}/>
                })
}
            </Swiper>
        )
    }
}
const mapStateToProps = (state) => ({announcementList: state.announcement.list})

export default connect(mapStateToProps)(TextSwiper)